// eslint-disable-next-line no-unused-vars
import React , { useEffect, useRef, useState } from 'react'
import { Carousel } from 'antd';
import "../../assets/styles/Banner.css"
// eslint-disable-next-line no-unused-vars
import { bannerApis } from "../../apis/banner"
export default function LunBoTu() {
    const [banner, setBanner] = useState([])
    let ref = useRef()
    function bont(cont) {
        ref.current = cont
        console.log(ref);
    }
    useEffect(() => {
        getbanner()
    },[])

    function getbanner() {
        fetch(`http://127.0.0.1:5174/api/banner`, {
            method: 'get',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;'
            },
        })
            .then(res => {
                if (res.status == 200) {
                    res.json().then(res => {
                        if (res.code == 200) {
                            console.log("成功", res.banners);
                            setBanner(res.banners)
                        }
                    })

                }
            })
            .catch(err => {
                // resk就是后端放回的结果
                console.log("失败1", err);
            })
    }
    return (
        //style={{backgroundImage:URL("http://p1.music.126.net/x3aGa0MAYZLI8NOrGqD8CQ==/109951168578569303.jpg")}}
        <div className='bod' >
            <div className='lt' onClick={() => bont(1)} >&lt;</div>
            {/* <div className='lt' onClick={prev} >&lt;</div> */}
            <div className='gt' onClick={() => bont(-1)}>&gt;</div>
            {/* <div className='gt' onClick={next}>&gt;</div> */}
            <Carousel autoplay className='lunbotu'>
                {
                    banner.map(item => {
                        // console.log(item);
                      return  <div key={item.targetId}>
                            <h3 ><img src={item.imageUrl} alt="" /></h3>
                        </div>
                    })
                }

            </Carousel>
        </div>
    )
}